<template>
	<view>
		<view v-if="activityInfo!==null" style="width: 94%;margin-left: 3%;">
			<!-- 顶部 -->
			<view style="display: flex;justify-content: space-between;margin-top: 10rpx;">
				<view style="display: flex;">
					<view><img style="width: 100rpx;" :src="activityInfo.actOrganizationAvatar" alt=""></view>
					<view style="margin-left: 10rpx;">
						<view style="margin-bottom: 12rpx;font-size: smaller;">{{activityInfo.actOrganizationName}}
						</view>
						<view style="font-size: small;color: #808080;">{{activityInfo.createAt}}</view>
					</view>
				</view>
				<view class="fontStyle" style="display: flex;align-items: center;">
					{{activityInfo.actViews}} 浏览量
				</view>
			</view>
			<view style="display: flex;justify-content:space-between;margin-top: 20rpx;margin-bottom: 20rpx;">
				<h3>{{activityInfo.actName}}</h3>
				<view style="font-size: smaller;display: flex;align-items: center;">活动范围：<span
						style="color: #007AFF;font-weight: bolder;">{{activityInfo.orgLimit.limName}}</span></view>
			</view>
			<view v-if="activityInfo.actAvatar!==null"><img style="width: 100%;height: 400rpx;"
					:src="activityInfo.actAvatar" alt="">
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view>
					<view style="font-size: smaller;">活动地点：{{activityInfo.actAddress}}</view>
					<view style="font-size: x-small;color: #808080;margin-top: 12rpx;">
						<view>活动开始时间:{{activityInfo.actBeginTime}}</view>
						<view>活动结束时间:{{activityInfo.actEndTime}}</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;color: #808080;">{{activityInfo.actContent}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actId: null,
				activityInfo: null
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.actId = option.actId
			this.getActivityInfo()
		},
		onShow() {
			this.getActivityInfo()
		},
		// 右上角更多
		onNavigationBarButtonTap: function(e) {
			var that = this;
			uni.showActionSheet({
				itemList: ['编辑活动', '取消活动'],
				success: function(res) {
					if (res.tapIndex == 0) {
						// 跳转到编辑活动界面
						uni.navigateTo({
							url: './editActivity?actId=' + that.actId
						})
					} else if (res.tapIndex == 1) {
						// 取消活动，并跳转回去
						uni.showModal({
							title: '提示',
							confirmColor: 'red',
							content: '确定取消活动吗?',
							success: res => {
								if (res.confirm) {
									that.removeActivity();
								}
							}
						});
					}
				}
			});
		},
		methods: {
			getActivityInfo() {
				this.$http.request({
					url: `/organizations/web/activity/detail/${this.actId}`
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.activityInfo = res.data;
					} else {
						uni.showToast({
							title: '获取活动详情失败',
							icon: 'none'
						});
					}
				})
			},
			// 取消活动
			removeActivity() {
				this.$http.request({
					url: `/organizations/web/activity/delete/${this.actId}`,
					method: 'DELETE'
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								uni.navigateBack()
							}
						});
					} else {
						uni.showToast({
							title: res.msg
						})
					}
				})
			}
		}
	}
</script>

<style>
	.fontStyle {
		font-size: smaller;
		color: #808080;
	}
</style>
